<template>
    <div class="createBusiness">

        <!--        头部-->
        <head-top></head-top>
        <div style="width: 100%;height: 50px;"></div>
        <div class="editorCon">
            <van-form validate-first @submit="onSubmit(form)">
                <!-- 通过 pattern 进行正则校验 -->
                <div class="formItem">
                    <div class="formItemBg">
                        <p class="nameTitle">新人微信号</p>
                        <van-field
                                v-model="form.weixin"
                                name="weixin"
                                placeholder="请输入"
                                :rules="[rules.weixin]"
                        />
                    </div>
                </div>
                <!-- 通过 validator 进行函数校验 -->
                <div class="formItem">
                    <div class="formItemBg">
                        <p class="nameTitle">新人手机号</p>
                        <van-field
                                v-model="form.phone"
                                name="phone"
                                placeholder="请输入"
                                :rules="[rules.phone]"
                        />
                    </div>
                </div>
                <!-- 通过 validator 进行异步函数校验 -->
                <div class="formItem">
                    <div class="formItemBg">
                        <p class="nameTitle">新人QQ号</p>
                        <van-field
                                v-model="form.qq"
                                name="qq"
                                placeholder="请输入"
                                :rules="[rules.qq]"
                        />
                    </div>
                </div>
                <div class="formItem">
                    <div class="formItemBg">
                        <p class="nameTitle">昵称</p>
                        <van-field
                                v-model="form.nickName"
                                name="pattern"
                                placeholder="请输入"
                                :rules="[{required: true, message: '请填写昵称' }]"
                        />
                    </div>
                </div>
                <div class="formItem">
                    <div class="formItemBg">
                        <p class="nameTitle">订单号</p>
                        <van-field
                                v-model="form.orderNumber"
                                name="pattern"
                                placeholder="请输入"
                                :rules="[{required: true, message: '请填写订单号' }]"
                        />
                    </div>
                </div>
                <div class="formItem">
                    <div class="formItemBg">
                        <p class="nameTitle">新人来源</p>
                        <van-field
                                v-model="form.fromTo"
                                readonly
                                name="pattern"
                                placeholder="请输入"
                                :rules="[{required: true,message: '请选择新人来源' }]"
                        >
                           <template #input>
                               <select class="select" v-model="form.fromTo">
                                   <option disabled>选择来源</option>
                                   <option :value="item.itemValue" v-for="item in personResources" >{{
                                       item.itemText }}
                                   </option>
                               </select>
                           </template>
                        </van-field>
                    </div>
                </div>

              <div class="formItem">
                <div class="formItemBg">
                  <p class="nameTitle">来源详情</p>
                  <van-field
                      v-model="form.resourceDetail"
                      readonly
                      name="pattern"
                      placeholder="请输入"
                      :rules="[{required: true,message: '请选择来源详情' }]"
                  >
                    <template #input>
                      <select class="select" v-model="form.resourceDetail">
                        <option disabled>来源详情</option>
                        <option :value="item.itemValue" v-for="item in personResourcesDetail" >{{
                            item.itemText }}
                        </option>
                      </select>
                    </template>
                  </van-field>
                </div>
              </div>


                <div class="formItem">
                    <div class="formItemBg">
                        <p class="nameTitle">选择性别</p>
                        <van-field
                                v-model="form.sex"
                                readonly
                                name="pattern"
                                placeholder="请输入"
                                :rules="[{required: true,message: '请选择性别' }]"
                        >
                            <template #input>
                                <select class="select" v-model="form.sex">
                                    <option disabled>选择性别</option>
                                    <option :value="item.itemValue" v-for="item in sexList" selected>{{
                                        item.itemText }}
                                    </option>
                                </select>
                            </template>
                        </van-field>
                    </div>
                </div>
                <div class="formItem">
                    <div class="formItemBg">
                        <p class="nameTitle">年龄</p>
                        <van-field
                                v-model="form.age"
                                name="age"
                                placeholder="请输入"
                                :rules="[rules.age]"
                        />
                    </div>
                </div>
                <div class="formItem">
                    <div class="formItemBg">
                        <p class="nameTitle">新人账号密码</p>
                        <van-field
                                v-model="form.password"
                                name="password"
                                placeholder="请输入"
                                :rules="[rules.password]"
                        />
                    </div>
                </div>


                <div class="sub">
                    <van-button round block type="info" native-type="submit">添加</van-button>
                </div>
            </van-form>
        </div>

        <!--    <div class="resetBut">-->
        <!--      <div class="button" @click="submit">添加</div>-->
        <!--    </div>-->
    </div>
</template>

<script>

    import {rules} from '@/utils/common'
    import userApi from '@/api/user'
    import comApi from '@/api/comapi'
    import headTop from "../../components/base/headTop.vue"
    import { Toast } from 'vant';
    export default {
        name: "createBusiness",
        components: {
            headTop
        },
        data() {
            return {
                sexList: [],
                personResources: [],
              personResourcesDetail:[],
                form: {
                    age: "",
                    fromTo: "known",
                    nickName: "",
                    orderNumber: "",
                    password: "",
                    phone: "",
                    qq: "",
                    resourceDetail: "netFriend",
                    sex:"1",
                    weixin: ""
                },
                rules: rules

            }
        },
        created() {
            this.getSex()
            this.getPersonResource()
            this.getPersonResourceDetail()
        },
        methods: {
            getSex() {
                comApi.getDictList('sex').then(res => {
                    this.sexList = res.data.records
                })
            },
            getPersonResource() {
                comApi.getDictList('resource_type').then(res => {
                    this.personResources = res.data.records
                })
            },
          getPersonResourceDetail() {
            comApi.getDictList('resource_detail').then(res => {
              this.personResourcesDetail = res.data.records
            })
          },
          onFailed(errorInfo) {
            console.log('failed提交表单不通过触发', errorInfo);
          },
          onSubmit(values) {
            console.log("submit",this.form)
            userApi.recommendRegistration(this.form).then(res=>{
              Toast(res.message)
              this.$router.back()
            })
          },



        },
    }
</script>

<style lang="less" scoped>
    .createBusiness {
        width: 100%;
        min-height: 100%;
        background: #f8f8f8;
    }

    .resetTitle {
        width: 100%;
        padding: 15px 0;
        position: fixed;
        top: 0;
        left: 0;
        background: #f8f8f8;
        z-index: 10001;

        .imgs {
            position: absolute;
            left: 10px;
            top: 13px;

            span {
                font-size: 25px;
            }
        }

        .resetText {
            width: 100%;
            text-align: center;
            font-weight: bold;
            font-size: 16px;
        }
    }

    .editorCon {
        width: 100%;
        background: #ffffff;
        font-size: 14px;

        ul {
            li {
                border-bottom: 1px solid #e8e8e8;

                .editorConLis {
                    padding: 10px;
                    display: flex;
                    align-items: center;

                    .nameTitle {
                        color: #000000;
                        line-height: 30px;
                    }

                    .ipt {
                        flex: 1;

                        input {
                            width: 100%;
                            height: 30px;
                            text-indent: 20px;
                        }
                    }

                }

                .selectWork {
                    .ipt {
                        margin-left: 20px;

                        .select {
                            height: 30px;
                            width: 100%;
                            border: 0;
                            background: #ffffff;

                            :nth-child(1) {
                                height: 0px !important;
                            }
                        }
                    }
                }
            }
        }

        .formItem {
            width: 100%;
            border-bottom: 1px solid #e8e8e8;

            .formItemBg {
                display: flex;
                align-items: center;
                flex-wrap: nowrap;
                padding: 10px;
                line-height: 30px;

                /deep/ .van-field {
                    flex: 1;
                }

                /*.ipt {*/
                /*    flex: 1;*/
                  padding-left: 20px;
                    .select {
                        width: 100%;
                      height: 30px;
                      border: none;
                      option{
                        height: 30px;
                      }
                    }
                /*}*/
                /deep/.van-cell {
                    padding: 0px;

                    input {
                        text-indent: 20px;
                        height: 30px;
                    }
                }

            }

        }

        .sub {
            width: 100%;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: #ffffff;
            padding-bottom: 10px;

            .van-button {
                width: 95%;
                margin: 0 auto;
                background: #f8f5be;
                border: none;
                color: black;
            }
        }
    }

    .resetBut {
        width: 100%;
        background: white;
        position: fixed;
        left: 0;
        bottom: 0;
        padding-bottom: 10px;

        .button {
            color: white;
            margin: 0 auto;
            width: 90%;
            border-radius: 30px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            background: #f8f5be;
        }

    }
</style>
